<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--jq-->
    <script src="jquery/jquery.js"></script>

    <!--
    ztree.all=core+check+editor
    -->
    <!--<script src="static/jquery.ztree.core.js"></script>-->
    <script src="ztree/jquery.ztree.all-3.5.js"></script>
    <script src="vue/vue.js"></script>

    <!--ztree提供多种样式风格  也可以自定义-->
    <!--<link rel="stylesheet" href="static/ztree/zTreeStyle.css">-->
    <link rel="stylesheet" href="ztree/metro.css">
</head>
<body>
<div id="treeDiv" style="height: 100px;">
    <input style="width: 100px;" @focus="showTree(true)" v-model="name" @keydown.enter="search"/>
    <ul id="treeDemo" class="ztree" v-show="isShow">

    </ul>
</div>
</body>
</html>
<script>

    new Vue({
        el: '#treeDiv',
        /**
         * data变成函数对象调用来生成
         * 首先不饿对象初始化后，在调用vue对象调用data声明的匿名函数来创建data对象
         * @returns {{nodes: [{name: string, pId: number, id: number, title: string, open: boolean},{name: string, pId: number, id: number},{name: string, pId: number, id: number, title: string},{name: string, pId: number, id: number},{name: string, pId: number, id: number},null,null], name: string, isShow: boolean, setting: {data: {simpleData: {enable: boolean}, key: {title: string}}, callback: {onClick: *}}}}
         */
        data: function () {
            return {
                name: '',
                isShow: false,
                setting: {  //ztree的配置对象
                    data: {//ztree的数据配置对象
                        simpleData: { //设置简单节点数组配置
                            enable: true //默认为false 设置true表示节点数组可以是一位结构
                        },
                        key: {
                            title: 'title'
                        }
                    },
                    callback: {
                        //回调
                        onClick: this.onClick
                    },
                    view: {
                        //    显示设置
                        fontCss: this.fontCss/*{'color':'red'}*/
                    }
                },
                nodes: [
                    //ztree的节点数组
                    {id: 1, pId: 0, name: '个人中心', open: true, title: '个人中心菜单'},
                    {id: 2, pId: 1, name: '我的资料'},//子节点中的父id必须与父id一致
                    {id: 3, pId: 0, name: '单位管理', title: '单位管理菜单'},
                    {id: 4, pId: 3, name: '单位信息'},
                    {id: 5, pId: 3, name: '单位账号'},
                    {id: 6, pId: 3, name: '电子台账'},
                    {id: 7, pId: 0, name: '系统管理', title: '系统管理菜单'}
                ]
            }
        },
        methods: {
            showTree: function (isShow) {
                this.isShow = isShow;

            },
            /**
             * ztree开发流程：
             * 1.声明配置setting对象
             * 2.声明配置setting对象
             * 3.根据配置节点和节点对象，创建ztree对象
             * $fn.zTree.init(需要挂载树的dom节点对象，配置对象，节点数组对象)
             * 树初始化方法
             */
            initTree: function () {
                let tree = $.fn.zTree.init($('#treeDemo'), this.setting, this.nodes);
                /*         console.log(tree);
                         console.log(tree.getNodes())*/
            },
            onClick: function (event, treeId, treeNode) {
                /*       console.log(event);//事件对象
                       console.log(treeId);//id ul的id*/
                       console.log(treeNode);//树的节点，触发点击事件的节点
                this.name = treeNode.name;
            },
            search: function () {
                //    1.根据搜索框输入的内容，从ztree的所有节点中进行模糊匹配，找到相关节点
                //    a.获取树节点
                let zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
                //    b.模糊查询节点
                let fuzzyNodes = zTreeObj.getNodesByParamFuzzy("name", this.name);
                console.log(fuzzyNodes)

                //设置还原所有高亮属性为false
                //transformToArray 将多维结构的节点数组转换为简单的一维结构
                var treeNodes = zTreeObj.transformToArray(zTreeObj.getNodes());
                for (let i = 0; i < treeNodes.length; i++) {
                    treeNodes[i].heightLight=false;
                    zTreeObj.updateNode(treeNodes[i]);
                }
                //设置指定节点高亮
                //    2.高亮显示
                for (let i = 0; i < fuzzyNodes.length; i++) {
                    //    a.找出树中对应的节点，设置高亮属性的highLight为true，更新树
                    console.log(fuzzyNodes[i])
                    fuzzyNodes[i].heightLight = true;
                    zTreeObj.updateNode(fuzzyNodes[i]);


                }
                //    b.设置显示样式，如果带有高亮属性的则为红色字体
            },
            fontCss: function (treeId, treeNode) {
                /**
                 * 根据传入的树id，树节点参数，进行判断，设置不同的显示样式‘’
                 * 每个节点显示的时候都会调用当前方法进行判断
                 */
                return treeNode.heightLight?{color: 'red'}:{color: 'black'}

            }
        },
        //注意ul节点需要挂载到dom后，才能找到该节点 使用mounted生命周期方法
        mounted: function () {
            this.initTree();
        }
    })
</script>